<!-- 我的考试-编辑详情-选择试卷 -->
<script setup lang='ts'>
  import { reactive, watch, nextTick } from 'vue';
  import { form, params, dictionary, tableKeyList } from './conf';
  import PaperPreview from '@/components/paper-preview/index.vue';
  import { papaerDataType } from '@/common/types/paper-preview';
  import { useCurrentInstance } from '@/common/utils/methods';

  const { $message } = useCurrentInstance();
  const props = defineProps<{ 
    selectDailog: boolean
  }>()
  const emit = defineEmits<{
    (e: 'updateSelectData', data: papaerDataType): void
    (e: 'close'): void
  }>();
  
  const data = reactive({
    params,
    list: [],
    totalNum: 0,
    getData: false,
    selectedPaperId: '',
    selectPaperRow: {} as papaerDataType,
    previewDialog: false,
  })

  watch(() => props.selectDailog, (val) => {
    if (val) {
      nextTick(() => {
        data.getData = true;
      })
    }
  })

  // 弹窗关闭
  const dialogClosed = () => {
    emit('close')
  }

  // 预览
  const showPreviewDialog = (row: papaerDataType) => {
    data.selectPaperRow = row;
    data.previewDialog = true;
  }

  // 更新配置试卷
  const updatePaperToConfig = () => {
    if (data.selectPaperRow.paperId) {
      emit('updateSelectData', data.selectPaperRow)
      emit('close');
    } else {
      $message.warning('请选择试卷')
    }
  }
</script>

<template>
    <el-dialog
      v-model="selectDailog"
      title="选择试卷"
      width="980px"
      @closed="dialogClosed"
    >
      <ConditionView
        v-model:params="data.params"
        :form="form"
        :dictionary="dictionary"
        @search="data.getData = true"
      ></ConditionView>
      <div>
        <el-button type="primary" @click="updatePaperToConfig">确定</el-button> 
        已选（{{ (data.selectedPaperId ? 1 : 0) + '/' + data.totalNum }}）
      </div>
      <ListView
        :tableKeyList="tableKeyList"
        :list="data.list"
        :dictionary="dictionary"
        :hasHandle="true"
        :fixed="false"
      >
        <template #radio="{row}">
          <el-radio 
            v-model="data.selectedPaperId" 
            :label="row.paperId" 
            @change="() => (data.selectPaperRow = row)">
            {{''}}
          </el-radio>
        </template>
        <template #handle="{row}">
          <el-button @click="showPreviewDialog(row)">预览</el-button>
        </template>
      </ListView>
      <Pagination
        url="/training.exam.api/paper/list"
        v-model:list="data.list"
        v-model:getData="data.getData"
        :params="data.params"
        :autoLoad="false"
        @setTotalNum="(num: number) => (data.totalNum = num)"
      ></Pagination>

      <PaperPreview v-model:previewDialog="data.previewDialog" :paperData="data.selectPaperRow"/>
    </el-dialog>
</template>

<style scoped></style>